<template>
  <view>

    <view class="addjiashiyuan" @tap="goaddjiashiyuan">
      <uni-icons type="plus" style="margin-right: 10upx; vertical-align: middle;" color="#007aff"
                 size="20"></uni-icons>
      新增驾驶员
    </view>
    <view class="jiashiyaunlist">
      <view class="item">
        <view class="fl flex-x-center" style="padding: 50rpx 0;text-align: center"
              @tap="driverobjfun({
          name:'无',
          sfcode:'',
          phone:'',
          id:''
          })">
          <view class="state">
            <uni-icons :color="[driverobj.id==''?'#007aff':'#999']" size="20"
                       type="circle-filled"></uni-icons>
          </view>
          <text>暂不选择驾驶员
          </text>
        </view>
      </view>
      <view class="item" v-for="(item,index) in jiashirenlist" :key="index">
        <view class="fl flex-x-center" @tap="driverobjfun(item)">
          <view class="state">
            <uni-icons :color="[driverobj.id==item.id?'#007aff':'#999']" size="22"
                       type="circle-filled"></uni-icons>
          </view>
          <view class="cente">

            <view class="name">{{ item.name }}</view>
            <view class="sfz">
              <text class="tit">身份证号</text>
              <text class="text">{{ item.sfcode }}</text>
            </view>
            <view class="sjh">
              <text class="tit">联系手机</text>
              <text class="text">{{ item.phone }}</text>
            </view>

          </view>
        </view>
        <view class="fr" style="padding-right: 10px">
          <uni-icons @tap="putjiashiyuan(item)" type="compose" size="22" color="#007aff"
                     style="margin-right: 4px"></uni-icons>
          <uni-icons @tap="deletejiashiyuan(item.id)" type="trash" size="22" color="#007aff"></uni-icons>
        </view>

      </view>
    </view>
  </view>
</template>

<script>
import {deletewxuserdriver, getwxuserdriverlist} from '@/utils/new_file.js'
import {mapMutations, mapState} from 'vuex'

var app = getApp()
export default {
  data() {
    return {
      jiashirenlist: []
    };
  },
  computed: {
    ...mapState(['driverobj'])
  },
  created() {
    this.wxuserdriverlistfun()
  },
  onShow() {
    this.wxuserdriverlistfun()
  },
  methods: {
    ...mapMutations(['driverfun']), //引入store方法
    wxuserdriverlistfun() {
      let id = uni.getStorageSync('useinfo').id
      getwxuserdriverlist(id).then(data => {
        if (data.data.code == 200) {
          this.jiashirenlist = data.data.rows

          if (this.driverobj) {
            let objsss = this.jiashirenlist.find(item => item.id == this.driverobj.id)
            console.log(objsss);
            this.driverfun(objsss)
          } else {
            this.driverfun(this.jiashirenlist[0])
          }

        }
      })


    },
    deletejiashiyuan(id) {
      let what = this
      uni.showModal({
        title: '提示',
        content: '是否删除该驾驶员',
        success: async function (res) {
          if (res.confirm) {
            console.log('用户点击确定');
            deletewxuserdriver(id).then(data => {
              what.wxuserdriverlistfun()
              what.driverfun(what.driverobj[0])
            })

          } else if (res.cancel) {

          }
        }
      });

    },
    driverobjfun(item) {
      this.driverfun(item)
      uni.navigateBack()
    },
    putjiashiyuan(item) {
      uni.navigateTo({
        url: '/pagesA/addjiashiyuan/addjiashiyuan?driverobj=' + JSON.stringify(item) + '&title=编辑'
      })
    },
    goaddjiashiyuan() {
      if (this.jiashirenlist.length > 10) {
        app.alert('只能添加10位驾驶员')

      } else {
        uni.navigateTo({
          url: '/pagesA/addjiashiyuan/addjiashiyuan?title=新增'
        })
      }

    },
  }
}
</script>

<style lang="less">
.addjiashiyuan {
  width: 100%;
  background-color: white;
  padding: 30upx;
  text-align: center;
  margin: 20upx 0;
  color: #007aff;
}

.jiashiyaunlist {
  padding: 0 30upx;
  background-color: white;

  .item {
    display: flex;
    justify-content: space-between;
    border-bottom: 1upx solid #efefef;
    padding: 20upx 0;

    .fl {
      line-height: 40upx;

      .state {
        margin-right: 15upx;
      }

      .cente {

        .sfz,
        .sjh {
          font-size: 24upx;
          color: #999;

          .tit {
            margin-right: 90upx;
          }
        }
      }

    }
  }
}
</style>